<template>
    <div>
        <div ref="container">
            <van-sticky>
                <van-nav-bar title="购物车" />
                <van-notice-bar background="#fafafa">
                    <div
                        style="background-color: #fafafa;display: flex;justify-content: space-between; width: 90vw; color: #333;">
                        <p>30天无忧退货</p>
                        <p>48小时快速退款</p>
                        <p>满88元免邮费</p>
                    </div>
                </van-notice-bar>
            </van-sticky>
        </div>
        <!--  -->
        <div class="goods-container" v-for="(item, index) in message" :key="index">
            <!-- 左侧图片 -->
            <div class="thumb">
                <div class="custom-control custom-checkbox">
                    <!-- 复选框 -->
                    <van-checkbox v-model="item.isSelected"></van-checkbox>
                    <label class="custom-control-label" :for="'cb' + index">
                        <!-- 商品的缩略图 -->
                        <img :src="item.list_pic_url" alt="" />
                    </label>
                </div>
            </div>
            <!-- 右侧信息区域 -->
            <div class="goods-info">
                <!-- 商品标题 -->
                <h6 class="goods-title">{{ item.goods_name }}</h6>
                <div class="goods-info-bottom">
                    <!-- 商品价格 -->
                    <span class="goods-price">￥{{ item.retail_price }}</span>
                    <!-- 商品的数量 -->
                    <van-stepper v-model="item.value" theme="round" button-size="22" disable-input
                        @change="onChange(item)" />
                </div>
            </div>
        </div>

        <br>
        <br>
        <br>
        <br>
        <br>
        <!--  -->

        <van-submit-bar :price="amount * 100" button-text="提交订单" style="margin-bottom: 46px;" @submit="onSubmit">
            <van-checkbox v-model="isAllSelected">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script>

import { crawl } from "@/api/ShoopingCart/ShoopingCart";
export default {
    name: 'BusinessShoppingCart',

    data() {
        return {
            message: [],
            // value: 0,
            checked: true,
            // isAllSelected: true,
        };
    },
    computed: {
        amount() {
            return this.onChange()
        },

        isAllSelected: {
            get() {                 //读取属性
                return this.message.every(ele => ele.isSelected == true)
            },
            set(val) {
                if (val) {
                    this.message.forEach(item => {
                        item.isSelected = true
                    })
                } else {
                    this.message.forEach(item => {
                        item.isSelected = false
                    })
                }
            }
        },

    },
    mounted() {

    },
    methods: {
        async grab() {
            const { data: res } = await crawl()
            res.data.forEach(element => {
                element.isSelected = false
            })
            this.message = res.data
        },
        onChange(item) {
            let HowMuch = this.message.filter(item => item.isSelected == true).reduce((total, item) => (
                total += item.value * item.retail_price), 0)
            return HowMuch
        },
        onSubmit() {
            if (this.amount !== 0) {
                this.$router.replace('/ShoppingCart/ShoppingSettlement')
            }

        }

    },
    created() {
        this.grab()
    }

};
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

.goods-container {
    +.goods-container {
        border-top: 1px solid #efefef;
    }

    padding: 10px;
    display: flex;

    .thumb {
        display: flex;
        align-items: center;

        img {
            width: 100px;
            height: 100px;
            margin: 0 10px;
        }
    }

    .goods-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        .goods-title {
            font-weight: bold;
            font-size: 12px;
        }

        .goods-info-bottom {
            display: flex;
            justify-content: space-between;

            .goods-price {
                font-weight: bold;
                color: red;
                font-size: 13px;
            }
        }
    }
}
</style>